

<template>
  <footer class="footer">
    <span class="todo-count"><strong>今日未完成:</strong>{{leftCount}}</span>
    <!-- <ul class="filters">
      <li>
        <a class="selected" href="#/">All</a>
      </li>
      <li>
        <a href="#/active">Active</a>
      </li>
      <li>
        <a href="#/completed">Completed</a>
      </li>
    </ul>
    <button class="clear-completed">Clear completed</button> -->
  </footer>
</template>
<script setup>
import {computed} from 'vue'
const props = defineProps({
  list:{
    type:Array,
    default:()=>[]
  }
})
console.log(props.list);
const leftCount = computed(()=>(props.list.filter(item =>!item.done)).length)

</script>